<template>
  <div>
    <ly-dialog
      v-model="dialogVisible"
      :title="loadingTitle"
      width="560px"
      :before-close="handleClose"
    >
      <el-form
        :inline="false"
        :model="formData"
        :rules="rules"
        ref="rulesForm"
        label-position="right"
        label-width="130px"
      >
        <el-form-item
          label="课节状态："
          prop="class_session_status"
          v-if="authority([5])"
        >
          <el-select
            v-if="authority([5])"
            v-model="formData.class_session_status"
            placeholder="请选择课节状态"
            clearable
            style="width: 300px"
            @change="search(1, $event)"
          >
            <el-option
              v-for="item in class_session_status"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item
          label="异常原因："
          prop="abnormal_cause"
          v-if="authority([5]) && formData.class_session_status == 2"
        >
          <el-input
            v-model.trim="formData.abnormal_cause"
            placeholder="请输入异常原因"
            style="width: 300px"
          ></el-input>
        </el-form-item>
        <!-- <el-form-item
        v-if="formData.zdquser_id"
          label="代课人员："
          prop="duser_name" 
        >
          <el-select
            v-model="formData.duser_name"
            placeholder="请选择代课人" 
            style="width: 300px" 
            @change="Management(4,$event)"
          >
            <el-option
              v-for="item in zdgegionuserArr"
              :key="item.id"
              :label="item.username"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>  -->
        <!-- <el-form-item
          label="是否正常上课："
          prop="status"
          v-if="authority([5])"

        >
          <el-select
            v-model="formData.status"
            placeholder="请选择是否正常上课"
            clearable
            style="width: 300px"
            @change="search(2, $event)"
          >
            <el-option
              v-for="item in class_status"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item> -->
        <el-form-item label="是否代课：" prop="is_pause" v-if="authority([5])">
          <el-select
            v-model="formData.is_daike"
            placeholder="请选择是否代课"
            clearable
            style="width: 300px"
            @change="search(5, $event)"
          >
            <el-option
              v-for="item in is_duser"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="志愿者考勤："
          prop="volunteer_stauts"
          v-if="authority([5])"
        >
          <el-select
            v-model="formData.volunteer_stauts"
            placeholder="请选择志愿者是否正常入会"
            clearable
            style="width: 300px"
            @change="search(3, $event)"
          >
            <el-option
              v-for="item in volunteer_stauts"
              :key="item.id"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="在地教师考勤："
          prop="local_teachers_status"
          v-if="authority([5])"
        >
          <el-select
            v-model="formData.local_teachers_status"
            placeholder="选择在地教师入会状态"
            clearable
            style="width: 300px"
            @change="search(6, $event)"
          >
            <el-option
              v-for="item in volunteer_stauts"
              :key="item.id"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="是否暂停" prop="is_pause">
          <el-select
            v-model="formData.is_pause"
            placeholder="请选择是否暂停"
            clearable
            style="width: 300px"
            @change="search(4, $event)"
          >
            <el-option
              v-for="item in is_pauseList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="暂停原因："
          prop="pause_remarks"
          v-if="formData.is_pause == 2"
        >
          <el-input
            v-model.trim="formData.pause_remarks"
            placeholder="请输入暂停原因"
            style="width: 300px"
          ></el-input>
        </el-form-item>
        <el-form-item label="备注：" v-if="authority([5])">
          <el-input
            v-model.trim="formData.remarks"
            placeholder="请输入备注"
            style="width: 300px"
          ></el-input>
        </el-form-item>
        <el-form-item label="备注：" prop="zremarks" v-if="authority([4])">
          <el-input
            v-model.trim="formData.zremarks"
            placeholder="请输入备注"
            style="width: 300px"
          ></el-input>
        </el-form-item>
      </el-form>
      
      <template #footer>
        <el-button @click="handleClose" :loading="loadingSave">取消</el-button>
        <el-button
          type="primary"
          @click="submitData"
          :loading="loadingSave"
          :disabled="loadingTitle == '详情'"
          >确定</el-button
        >
      </template>
    </ly-dialog>
  </div>
</template>

<script>
import {
  timetableAdd,
  timetableUpdate,
  addressAreaRoot,
  zdegionuser,
  zdgegionuser,
  zxdgegionuser,
} from "@/api/api";
import LyDialog from "@/components/dialog/dialog.vue";
import { setStorage, getStorage } from "@/utils/util";
export default {
  emits: ["refreshData"],
  props: {
    type: {
      type: String,
      default: "",
    },
  },
  name: "addAdmin",
  components: { LyDialog },
  data() {
    return {
      userInfo: "",
      zdegionuserArr: [], //在地区域负责人数组
      zdgegionuserArr: [], //在地工作人员数组
      zdgegionuserArr_all: [], //在地工作人员数组--全部
      zxdgegionuserArr: [], //在线工作人员数组
      dialogVisible: false,
      loadingSave: false,
      loadingTitle: "",
      formData: {},
      rules: {
        local_teachers_status: [
          {
            required: true,
            message: "请选择在地老师是否正常入会",
            trigger: "change",
          },
        ],
        class_session_status: [
          { required: true, message: "请选择状态", trigger: "change" },
        ],
        class_status: [
          { required: true, message: "请选择是否正常上课", trigger: "change" },
        ],
        volunteer_stauts: [
          {
            required: true,
            message: "请选择志愿者是否正常入会",
            trigger: "change",
          },
        ],
        is_pause: [
          { required: true, message: "请选择是否暂停", trigger: "change" },
        ],
        is_daike: [
          { required: true, message: "请选择是否代课", trigger: "change" },
        ],
        pause_remarks: [
          { required: true, message: "请输入暂停原因", trigger: "blur" },
        ],
        remarks: [{ required: true, message: "请输入备注", trigger: "blur" }],
        zremarks: [{ required: true, message: "请输入备注", trigger: "blur" }],
        abnormal_cause: [
          { required: true, message: "请输入异常原因", trigger: "blur" },
        ],
        status: [{ required: true, message: "请选择状态", trigger: "change" }],
      },
      GroupList: [], //管理员分组列表
      AreaRootList: [], //区域列表获取
      passwordSwitch: false, //是否修改密码
      class_session_status: [
        {
          value: "1",
          label: "正常",
        },
        {
          value: "2",
          label: "异常",
        },
      ],
      class_status: [
        {
          value: "1",
          label: "正常",
        },
        {
          value: "2",
          label: "异常",
        },
      ],
      volunteer_stauts: [
        {
          value: "1",
          label: "正常",
        },
        {
          value: "2",
          label: "异常",
        },
      ],
      is_pauseList: [
        {
          value: "1",
          label: "未暂停",
        },
        {
          value: "2",
          label: "暂停",
        },
      ],
      is_duser: [
        {
          value: "1",
          label: "未代课",
        },
        {
          value: "2",
          label: "代课",
        },
      ],
    };
  },
  methods: {
    authority(groupArr = [0]) {
      // 权限筛选
      let userInfo = this.userInfo;
      // 当前权限和传来的权限组进行对比
      if (groupArr.some((item) => Number(item) === userInfo)) return true;
      return false;
    },
    Management(i, e) {
      if (i === 1) {
        // 在地区域负责人选择

        let obj = this.zdegionuserArr.find((item) => item.id == e);
        this.formData.zdquser_id = obj.id;
        this.formData.zdquser_name = obj.username;
        this.zdgegionuserArr = this.zdgegionuserArr_all.filter(
          (item) => item.pid == obj.id
        );
        this.formData.user_id = ""; //子集置空
        this.formData.user_name = ""; //子集置空
        this.formData.duser_id = "";
        this.formData.duser_name = "";
      }
      if (i == 2) {
        // 在地工作人员
        let obj = this.zdgegionuserArr.find((item) => item.id == e);
        this.formData.user_id = obj.id;
        this.formData.user_name = obj.username;
      }
      if (i == 3) {
        // 在线工作人员
        let obj = this.zxdgegionuserArr.find((item) => item.id == e);
        console.log(obj, "---------obj");
        this.formData.zxguser_id = obj.id;
        this.formData.zxguser_name = obj.username;
        console.log(
          this.formData.zxguser_name,
          "----this.formData.zxguser_name = obj.username "
        );
      }
      if (i == 4) {
        // 在地工作人员
        let obj = this.zdgegionuserArr.find((item) => item.id == e);
        this.formData.duser_id = obj.id;
        this.formData.duser_name = obj.username;
      }
    },
    search(i, e) {
      if (i === 1) {
        this.formData.class_session_status = this.class_session_status.find(
          (item) => item.value == e
        ).value;
        this.formData.abnormal_cause = "";
      }

      if (i === 2) {
        this.formData.status = this.class_status.find(
          (item) => item.value == e
        ).value;
      }

      if (i === 3) {
        this.formData.volunteer_stauts = this.volunteer_stauts.find(
          (item) => item.value == e
        ).value;
      }

      if (i === 4) {
        this.formData.is_pause = this.is_pauseList.find(
          (item) => item.value == e
        ).value;
        if (this.formData.is_pause == 1) this.formData.pause_remarks = "";
      }

      if (i === 5) {
        this.formData.is_daike = this.is_pauseList.find(
          (item) => item.value == e
        ).value;
      }

      if (i === 6) {
        this.formData.local_teachers_status = this.volunteer_stauts.find(
          (item) => item.value == e
        ).value;
      }
    },
    handleClose() {
      this.dialogVisible = false;
      this.loadingSave = false;
      this.formData = {};
      this.passwordSwitch = false;
      this.$emit("refreshData");
    },
    addModuleFn(item, flag, GroupList) {
      this.loadingTitle = flag;
      this.dialogVisible = true;
      if (!this.GroupList && !this.GroupList.length) this.GroupList = GroupList;
      if (item) {
        this.formData = item;
        // 如果上课时间段是字符串
        // if (typeof item.calss_time_slot == "string")
        //   this.formData.calss_time_slot = item.calss_time_slot.split("-");
        // 如果有zdquser id 就把子集数组赋值给子集数组
        if (item.zdquser_id) {
          this.zdgegionuserArr = this.zdgegionuserArr_all.filter(
            (list) => list.pid == item.zdquser_id
          );
        }
      }
    },

    submitDataOne() {
      let vm = this;

      this.$refs["rulesForm"].validate((obj) => {
        if (obj) {
          this.loadingSave = true;

          if (vm.passwordSwitch && vm.formData.passwordEdit) {
            // 有修改密码 修改函数和原始密码函数替换 删除修改的函数
            vm.formData.password = vm.formData.passwordEdit;
            delete vm.formData.passwordEdit;
          }
          let param = {
            ...this.formData,
          };
          if (this.formData.id) {
            timetableUpdate(param).then((res) => {
              this.loadingSave = false;
              if (res.code == 1) {
                this.$message.success(res.msg);
                this.handleClose();
                this.$emit("refreshData");
              } else {
                this.$message.warning(res.msg);
              }
            });
          } else {
            timetableAdd(param).then((res) => {
              this.loadingSave = false;
              if (res.code == 1) {
                this.$message.success(res.msg);
                this.handleClose();
                this.$emit("refreshData", 1);
              } else {
                this.$message.warning(res.msg);
              }
            });
          }
        }
      });
    },
    submitData() {
      let vm = this;
      if (vm.passwordSwitch && vm.formData.passwordEdit) {
        vm.$confirm("您修改了改用户的原始密码，您确定要进行密码修改吗?", {
          closeOnClickModal: false,
        })
          .then((res) => {
            vm.submitDataOne();
          })
          .catch(() => {});
      } else {
        vm.submitDataOne();
      }
    },
    imgBeforeUpload(file) {
      const isJPG = file.type === "image/jpeg" || file.type === "image/png";
      if (!isJPG) {
        this.$message.error("图片只能是 JPG/PNG 格式!");
        return false;
      }
      return isJPG;
    },
    // async imgUploadRequest(param) {
    //     var vm = this
    //     let obj= await platformsettingsUploadPlatformImg(param)
    //     if(obj.code == 1) {
    //         let res=''
    //         if (obj.data.data[0].indexOf("://")>=0){
    //             res = obj.data.data[0]

    //         }else{
    //             res = url.split('/api')[0]+obj.data.data[0]
    //         }
    //         vm.formData.default_image = res
    //     } else {
    //         vm.$message.warning(res.msg)
    //     }
    // },
    imgUploadSuccess(res) {
      // if (res) {
      //     this.formData.image = res.url
      // }
    },
    getAreaRoot() {
      // 地区列表获取
      let objs = {
        page: 1,
        per_page: 999, //设置最长数据
      };
      addressAreaRoot(objs).then((res) => {
        if (res.code == 1) {
          console.log(res, "数据获取成功------------");
          this.AreaRootList = res.data.data;
        }
      });
    },
    async getManage() {
      const [zdegionusers, zdgegionusers, zxdgegionusers] = await Promise.all([
        zdegionuser(),
        zdgegionuser(),
        zxdgegionuser(),
      ]).then((res) => {
        let rese = res.map((rese) => {
          if (rese.code == 1 && rese.data.length > 0) {
            return rese.data;
          }
          return [];
        });
        return rese;
      });

      console.log([zdegionusers, zdgegionusers, zxdgegionusers], "-----res");
      this.zdegionuserArr = zdegionusers; //在地区域负责人数组
      this.zdgegionuserArr_all = zdgegionusers; //在地工作人员数组
      this.zxdgegionuserArr = zxdgegionusers; //在线工作人员数组
    },
  },
  created() {
    // 管理员加载
    //  this.getManage()
  },
  mounted() {
    console.log("开始获取，‘-----------");

    //this.getAreaRoot();
    this.userInfo = JSON.parse(getStorage("groupId"));
  },
};
</script>
<style scoped>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 128px;
  height: 128px;
  line-height: 128px;
  text-align: center;
}

.avatar {
  width: 128px;
  height: 128px;
  display: block;
}
</style>
